<template>
  <el-dialog v-model="dialogVisible" title="编辑人员" draggable width="500">
    <el-select v-model="sltValue" filterable clearable :remote-method="remoteMethod" placeholder="选择" size="large" style="width: 100%">
      <el-option v-for="item in options" :key="item.id" :label="`${item.text}（${item.value}）`" :value="item.id" />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClickCancel">取消</el-button>
        <el-button type="primary" @click="handleClickConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Api from '../../api'
import { useUsersStore } from '../../stores'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const sltValue = ref()
const options = ref<any[]>([])
const emit = defineEmits(['update:modelValue', 'closeDialog'])
const rowId = ref(0)
const openDialog = async (row: any) => {
  rowId.value = row.id
  dialogVisible.value = true
  options.value = useUsersStore().userAllList.map((item: any) => {
    return {
      id: item.userId,
      text: item.nickName,
      value: item.userName,
      userId: item.userId,
      userName: item.userName,
      nickName: item.nickName,
      disabled: false,
    }
  })
  sltValue.value = row.pmdUserId
}
const remoteMethod = (query: string) => {
  options.value = query
    ? useUsersStore().userApprovalList.map((item: any) => {
        return {
          id: item.userId,
          text: item.nickName,
          value: item.userName,
          userId: item.userId,
          userName: item.userName,
          nickName: item.nickName,
          disabled: false,
        }
      })
    : []
}
const handleClickCancel = () => {
  dialogVisible.value = false
  sltValue.value = null
}
const handleClickConfirm = async () => {
  const item = options.value.find((item) => item.id == sltValue.value)
  if (item) {
    const { code } = await Api.Projects.updatePmdUser({
      id: rowId.value,
      pmdUserId: item.userId,
      pmdUserName: item.userName,
      pmdUserNick: item.nickName,
    })
    if (code == 200) {
      ElMessage.success('编辑人员成功')
      dialogVisible.value = false
      emit('closeDialog')
    } else {
      ElMessage.error('编辑人员失败')
    }
  }
}

defineExpose({
  openDialog,
})
</script>
<style scoped></style>
